<template>
  <div class="filmCover">
    <van-row class="row" gutter="5px">
      <van-col span="5" >
        <img :src="filmsObj.poster" alt="" @click="lookDetail(filmsObj.filmId)"/>
      </van-col>

      <van-col span="16" class="info" >
        <div class="center" @click="lookDetail(filmsObj.filmId)">
          <div class="titel">
            {{ filmsObj.name }}
            <span>&nbsp;{{ filmsObj.item.name }}&nbsp;</span>
          </div>
          <div class="score">
            观众评分 <span>{{ filmsObj.grade }}</span>
          </div>
          <div class="performer">
            <!-- " -->
            <!--  -->
            <span
              >主演：<i v-for="(item, index) in filmsObj.actors" :key="index"
                >{{ item.name }}&nbsp;</i
              ></span
            >
          </div>
          <div class="region">
            {{ filmsObj.nation }} | {{ filmsObj.runtime }}分钟
          </div>
        </div>
      </van-col>

      <van-col span="3" class="buy">
        <div>
          <van-button
            plain
            type="warning"
            size="small"
            class="btn"
            v-if="filmsObj.isPresale && filmsObj.isSale"
            >预购</van-button
          >
          <van-button
            plain
            type="warning"
            size="small"
            class="btn"
            v-if="filmsObj.isPresale"
            >购票</van-button
          >
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'FilmCover',
  props: {
    filmsObj: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 点击某个电影，跳转到该电影的详情页
    lookDetail(moveId){
      this.$router.push(`/moveDetail/${moveId}`)
    }
  }
}
</script>

<style lang="less" scoped>
.filmCover {
  .row {
    height: 99px;
    padding: 12px;

    img {
      width: 67px;
      height: 100%;
      border-radius: 3px;
    }
    .info {
      margin: auto;
      .center {
        height: 82px;
        .titel {
          width: 100%;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            font-size: 13px;
            background: #b8bcc2;
            border-radius: 3px;
            color: #fff;
          }
        }
        .score {
          color: #99999a;
          margin-top: 2px;
          font-size: 13px;
          span {
            color: #ffb232;
          }
        }
        .performer {
          margin: 2px 0;
          color: #797d82;
          font-size: 13px;
          span {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .region {
          color: #797d82;
          font-size: 13px;
        }
      }
    }
    .buy {
      display: flex;
      align-items: center;
      div {
        width: 100%;
        display: flex;
        .btn {
          margin: auto;
        }
      }
    }
  }
}
</style>
